﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>官网</title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
			text-align: center;
		}
		.pic image {
			display: block; /*默认有图片不显示*/
			position: absolute; /*绝对定位.对应的是.pic这个div*/
			top: 0px;
			left: 0px;
		}
		.pic a {
			display: none;
		}
		.pic { /*专门显现图片区*/
			position: relative; /*相对定位.对应.pic img*/
			height:100%;
			z-index:0;
		}
		.btn {
			height: 10px;
			overflow:hidden;
			position: absolute; /*绝对定位相对于banner div*/
			bottom: 30px;
			right:49%;
			z-index:1;
		}
		.btn ul li {
			background-color: #000000; /*黑色*/
			color: #ffffff;
			list-style-type: none;
			width: 18px;
			height: 18px;
			float: left;
			border-radius: 9px; /*变成圆的*/
			text-align: center;
			line-height: 18px;
			cursor: pointer; /*鼠标移动变手指状态*/
			margin-left: 5px;
		}
		.btn ul li.one {
			background-color: #ff9966;
		}
	</style>
<link href="css/publice.css" type="text/css" rel="stylesheet" />
<link href="css/style1.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery1.42.min.js" ></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js" ></script>
<script type="text/javascript" src="js/style.js" ></script>
</head>
<body>
<!--top_bar-->
<div class="clear"></div>
<div class="topWrap">
	<div class="top_bar">
		<div class="top_left">
			欢迎访问高校智慧就业大数据分析服务平台！
		</div>
		<div class="top_right">
			<p class="icon icon1">166-2165-9212</p>
			<p class="icon icon2">官方微信</p>
		</div>
	</div>
</div>
<!--nav-->
<div class="clear"></div>
<div class="navWrap">
	<div class="logo"><a href="#"><img src="img/3.jpg"></a></div>
	<div class="nav_bar">
		<a href="Homepage.html">首页</a>
		<a href="/zaoping" class="cur">招聘信息</a>
		<a href="/tijiao">毕业生信息填写</a>
		<a href="/passwordchange">修改密码</a>
	</div>
</div>
<!--banner-->
<div class="clear"></div>
<div class="index_banner">
	<div id="slideBox" class="slideBox">
		<div class="btn">
			<ul><li></li><li></li><li></li></ul>
		</div>
		<div class="pic">
			<a href="#"><img style="width:100%" alt="" src="temp/pg1.jpeg" /></a>
			<a href="#"><img style="width:100%" alt="" src="temp/pg2.jpg" /></a>
			<a href="#"><img style="width:100%" alt="" src="temp/pg3.jpg" /></a>
		</div>
	</div>
</div>
<!--main-->
<div class="clear"></div>
<div class="mainWrap">
	<div class="main_one">
		<div class="main_left">
			<img src="temp/004.jpg" class="video"/>
			<!--<img src="img/005.jpg" class="video_but"/>-->
		</div>
		<div class="main_right">
			<div class="r_left">
				<h2>社会动态</h2>
				<div class="dt_con">
					<a href="#">
						<h3>“教育部有关部门指导相关招生
                            单位合理调整研究生考试招生近期工作安排      2020-2-04</h3>
						<p>通知明确，原定近期举行的自划线高校硕士研究生复试录取工作和有关招生单位博士研究生考试招生工作等推迟举行，具体工作安排由各相关招生单位在所在地省级高校招生委员会指导下，结合本地本单位疫情防控情况自行确定。原定4月初左右进行的全国硕士研究生复试工作是否延期将视疫情防控进展情况另行通知</p>
					</a>
				</div>
				<div class="dt_con" style="padding-top: 25px;">
					<a href="#">
						<h3>疫情过后，如何解决就业难问题？      2020-03-10</h3>
						<p>今年全国普通高校毕业生874万人，又遭遇新冠肺炎疫情，就业形势似乎雪上加霜。但是疫情的影响是短期的，社会各界只要携手努力、积极应对，高校毕业生的就业问题一定能有效解决。在高校毕业生群体内部，影响就业结果的因素是什么？为什么有些毕业生能够找到高收入、高满意度的工作，而其他毕业生却无业可就或者有业不就呢？除了在求职方法、求职意愿和求职努力程度等求职方面有所差异之外，人力资本质量是核心的影响因素。</p>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="clear"></div>


<div class="mainWrap mainWrapa">
	<div id="char110" class="chart" style="width:100%;height: 280px;"></div>
	<div id="echarts_3" class="chart" style="width:100%;height: 280px;"></div>
</div>

<div class="clear"></div>
<div class="mainWrap">
	<div class="main_one">
		<div class="picScroll-left">
			<div class="hd">
				<a class="next"></a>
				<a class="prev"></a>
			</div>
			<div class="bd">
				<MARQUEE οnmοuseοver=stop() οnmοuseοut=start() scrollAmount=8 loop=infinite deplay="0"><IMG src="img/001.jpg" ><IMG src="img/002.jpg"><IMG src="img/003.jpg"></MARQUEE>
			</div>
		</div>
	</div>
</div>
<!--foot-->
<div class="clear"></div>
<div class="footWrap">
	<div class="footer">
		<div class="foot_l">
			<p><img src="img/foot_icon1.png">16621659212</p>
			<p><img src="img/foot_icon2.png">16621659212</p>
		</div>
		<div class="foot_r">
			<p class="wz">2015-2020高校智慧就业大数据分析服务平台版权所有，并保留所有权利</p>
		</div>
	</div>
</div>


<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/common.js"></script>
<script src="js/echarts.common.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/echarts-all.js"></script>

<!--图片自动切换-->
<script type="text/javascript">
	$(function () {
		//自动播放图片
		var i = 0;
		var t = setInterval(autoplay, 3000);
		function autoplay() {
			i++;
			if (i > 4) i = 0;
			$(".btn ul li").eq(i).addClass("one").siblings().removeClass("one");
			$(".pic a").eq(i).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
		}
		$("#banner").hover(function () {
			clearInterval(t);
		}, function () {
			t = setInterval(autoplay, 1000);
		});
	});
</script>


<!--视图折线-->
<script>
	$(function () {
		$.ajax({
			url: "/seven",
			type: "post",
			dataType:"json",
			success: function (data) {
				echarts_3(data.datas);

			}
		});
	});

	function echarts_3(datat) {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('echarts_3'));
		var dataAxis = [];
		var data = [];
		$(datat).each(function (k, v) {
			dataAxis.push(v.city);
			data.push(v.count);
		});
		var app = {};
		option = null;
		option = {
			title: {
				text: '就业流向按城市分布TOP10',
				subtext: 'Top 10 employment flows by city'
			},
			tooltip : {
				trigger: 'axis'
			},
			legend: {
				orient: 'vertical',
				data:['简易程序案件数']
			},

			color:['#a4d8cc','#25f3e6'],
			toolbox: {
				show : false,
				feature : {
					mark : {show: true},
					dataView : {show: true, readOnly: false},
					magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			calculable : true,
			xAxis: {
				type: 'category',
				axisTick:{show:false},

				boundaryGap : false,
				axisLabel: {
					textStyle:{
						color: '#ccc',
						fontSize:'12'
					},
					lineStyle:{
						color:'#2c3459',
					},
					interval: {default: 0},
					rotate:50,
					formatter : function(params){
						var newParamsName = "";// 最终拼接成的字符串
						var paramsNameNumber = params.length;// 实际标签的个数
						var provideNumber = 4;// 每行能显示的字的个数
						var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
						/**
						 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
						 */
						// 条件等同于rowNumber>1
						if (paramsNameNumber > provideNumber) {
							/** 循环每一行,p表示行 */
							var tempStr = "";
							tempStr=params.substring(0,4);
							newParamsName = tempStr+"...";// 最终拼成的字符串
						} else {
							// 将旧标签的值赋给新标签
							newParamsName = params;
						}
						//将最终的字符串返回
						return newParamsName
					}

				},
				data: dataAxis
			},
			yAxis: {
				type: 'value',
				axisLabel: {
					textStyle: {
						color: '#ccc',
						fontSize:'12',
					}
				},
				axisLine: {
					lineStyle:{
						color:'rgba(160,160,160,0.3)',
					}
				},
				splitLine: {
					lineStyle:{
						color:'rgba(160,160,160,0.3)',
					}
				},
			},
			series: [{
				data: data,
				type: 'line',
				areaStyle: {

					normal: {type: 'default',
						color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
							offset: 0,
							color: '#25f3e6'
						}, {
							offset: 1,
							color: '#0089ff'
						}], false)
					}
				},
				smooth:true,
				itemStyle: {
					normal: {areaStyle: {type: 'default'}}
				}
			}]
		};

		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}}
</script>
<!--<script src="/static/main/meat.js" type="text/javascript"></script>-->
<!--视图柱形-->
<script type="text/javascript">
	$(function () {
		$.ajax({
			type: "post",
			url: "/meat",
			success: function (data) {
				f(data.datas);
			}
		});
	});
	function f(datat) {
		var myChart = echarts.init(document.getElementById('char110'), 'infographic');
		var dataAxis = [];
		var data = [];
		//data = datat;
		$(datat).each(function (k, v) {
			dataAxis.push(v.subject);
			data.push(v.yeid);
		});
		var app = {};
		option = null;
		var yMax = 3;
		var dataShadow = [];
		for (var i = 0; i < data.length; i++) {
			dataShadow.push(yMax);
		}

		option = {
			title: {
				text: '毕业生就业难度指数',
				subtext: 'Graduate employment difficulty index'
			},
			xAxis: {
				left:50,
				data: dataAxis,
				axisLabel: {
					inside: true,
					textStyle: {
						color: '#fff'
					}
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				z: 10
			},
			yAxis: {
				left:50,
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					textStyle: {
						color: '#999'
					}
				}
			},
			dataZoom: [
				{
					type: 'inside'
				}
			],
			series: [
				{ // For shadow
					type: 'bar',
					itemStyle: {
						color: 'rgba(0,0,0,0.05)'
					},
					barGap: '-100%',
					barCategoryGap: '40%',
					data: dataShadow,
					animation: false
				},
				{
					type: 'bar',
					itemStyle: {
						color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1,
								[
									{offset: 0, color: '#83bff6'},
									{offset: 0.5, color: '#188df0'},
									{offset: 1, color: '#188df0'}
								]
						)
					},
					emphasis: {
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{offset: 0, color: '#2378f7'},
										{offset: 0.7, color: '#2378f7'},
										{offset: 1, color: '#83bff6'}
									]
							)
						}
					},
					data: data
				}
			]
		};
// Enable data zoom when user click bar.
		var zoomSize = 6;
		myChart.on('click', function (params) {
			console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
			myChart.dispatchAction({
				type: 'dataZoom',
				startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
				endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
			});
		});
		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}

	}

</script>
</body>
</html>
